<template>
  <div class="index">
    <div class="main"> 
      <div >
        <el-carousel :interval="5000" arrow="always" :height="carousel_h +'px'">
            <el-carousel-item v-for="img in carousel" :key="img.id">
              <img :src="img.img_src"/>
            </el-carousel-item>
        </el-carousel>
      </div>
      <div class="notice">
        <span>公告：</span>
        <span> 平台展示为零售价，如需成为分销商，请联系客服开通！【新疆 西藏 内蒙古 宁夏 海南 甘肃东三省部分偏远地区不包邮，运费单罐加10元】</span>
      </div>

      <div class="recommend">
        <div class="title">
          <div class="xin" @mouseover="click_x">新品上市</div>
          <div class="jing" @mouseover="click_j">精品推荐</div>
          <div class="re" @mouseover="click_r">热销排行</div>
        </div>

        <div class="img_concent">
          <div :style="dis_i1" class="i1" v-for="p of product_xin" :key="p.pid">
            <div class="i1_concent">
              <div class="i1_img">
                <router-link :to="`/details/${p.pid}`">
                  <img :src="p.img_lg">
                </router-link>
              </div>
            </div>
            <div class="i1_font">
              <div class="font_title"><span>{{p.title1}}</span></div>
              <div>
                <span class="font_price">¥{{p.price}}</span>
                <router-link :to="`/details/${p.pid}`" class="font_a">去看看</router-link>
              </div>
            </div>
          </div>

          <div :style="dis_i2" class="i2" v-for="p of product_jing" :key="p.pid">
            <div class="i1_concent">
                <router-link :to="`/details/${p.pid}`">
                  <img :src="p.img_lg">
                </router-link>
            </div>
            <div class="i1_font">
              <div class="font_title"><span>{{p.title1}}</span></div>
              <div>
                <span class="font_price">¥{{p.price}}</span>
                <router-link :to="`/details/${p.pid}`" class="font_a">去看看</router-link>
              </div>
            </div>
          </div>
          
          <div :style="dis_i3" class="i3" v-for="p of product_re" :key="p.pid">
            <div class="i1_concent">
                <router-link :to="`/details/${p.pid}`">
                  <img :src="p.img_lg">
                </router-link>
            </div>
            <div class="i1_font">
              <div class="font_title"><span>{{p.title1}}</span></div>
              <div>
                <span class="font_price">¥{{p.price}}</span>
                <router-link :to="`/details/${p.pid}`" class="font_a">去看看</router-link>
              </div>
            </div>
          </div>

          </div>
        </div>
      </div>

      <div class="f1 F1">
        <div class="f1_nav">
          <div class="f1_nav_title">
            <div>1F</div>
            <div>母婴专区</div>
          </div>
          <div class="f1_nav_a">
            <router-link to="#">奶粉</router-link>
            <router-link to="#">营养品</router-link>
            <router-link to="#">辅食</router-link>
            <router-link to="#">宝宝用品</router-link>
            <router-link to="#">更多>></router-link>
          </div>
        </div>
        <div class="f1_bottom">
          <div class="f1_left_img">
            <img src="/img/index/mu0.png">
          </div>
          <div class="f1_content">
            <div class="p_1" v-for="p of product_mu" :key="p.pid">
              <div class="p1_img">
                <router-link :to="`/details/${p.pid}`">
                  <img :src="p.img_lg">
                </router-link>
                  
              </div>
              <div class="p1_title">
                {{p.title1}}
              </div>
              <div class="p1_price">
                <div>¥ {{p.price}}</div>
                <div class="cart">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="f1 F2">
        <div class="f1_nav">
          <div class="f1_nav_title f2_nav_title">
            <div>2F</div>
            <div>食品保健</div>
          </div>
          <div class="f1_nav_a">
            <router-link to="#">Ostelin</router-link>
            <router-link to="#">Ddrops</router-link>
            <router-link to="#">Life Space</router-link>
            <router-link to="#">Healthy Care</router-link>
            <router-link to="#">更多>></router-link>
          </div>
        </div>
        <div class="f1_bottom">
          <div class="f1_left_img">
            <img src="/img/index/bao0.png">
          </div>
          <div class="f1_content">
            <div class="p_1" v-for="p of product_bao" :key="p.pid">
              <div class="p1_img">
                <router-link :to="`/details/${p.pid}`">
                  <img :src="p.img_lg">
                </router-link>
              </div>
              <div class="p1_title">
                {{p.title1}}
              </div>
              <div class="p1_price">
                <div>¥ {{p.price}}</div>
                <div class="cart">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="f1 F3">
        <div class="f1_nav">
          <div class="f1_nav_title">
            <div>3F</div>
            <div>美妆个护</div>
          </div>
          <div class="f1_nav_a">
            <router-link to="#">赫莲娜</router-link>
            <router-link to="#">CPD</router-link>
            <router-link to="#">兰蔻</router-link>
            <router-link to="#">资生堂</router-link>
            <router-link to="#">更多>></router-link>
          </div>
        </div>
        <div class="f1_bottom">
          <div class="f1_left_img">
            <img src="/img/index/mei0.png">
          </div>
          <div class="f1_content">
            <div class="p_1" v-for="p of product_mei" :key="p.pid">
              <div class="p1_img">
                <router-link :to="`/details/${p.pid}`">
                  <img :src="p.img_lg">
                </router-link>
              </div>
              <div class="p1_title">
                {{p.title1}}
              </div>
              <div class="p1_price">
                <div>¥ {{p.price}}</div>
                <div class="cart">加入购物车</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    
    </div> 
</template>

<script>
export default {
  data(){
    return {
      carousel_h:400,
      carousel:[],      //接收轮播图数据
      product:[],       //接收所有商品数据
      product_xin:[],   //接收新品商品数据
      product_jing:[],  //接收精品商品数据
      product_re:[],    //接收热销商品数据
      product_mei:[],   //接收美妆商品数据
      product_bao:[],   //接收保健商品数据
      product_mu:[],    //接收母婴商品数据
      dis_i1:"display:block",
      dis_i2:"display:none",
      dis_i3:"display:none",
    }
  },

  methods:{
    carousel_i(){  //轮播图
          this.axios.get("/ub/carousel").then(result=>{
          this.carousel = result.data;
        })
    },
    product_(){  //商品列表
      this.axios.get("/ub/product").then(result=>{
        this.product = result.data;
        // console.log(this.product)
        // 新品列表
        this.product.forEach(item => {
          if(item.classify=="xin"){
            this.product_xin.push(item)
          }
        });
        // 精品列表
        this.product.forEach(item => {
          if(item.classify=="jing"){
            this.product_jing.push(item)
          }
        });
        // 热销列表
        this.product.forEach(item => {
          if(item.classify=="re"){
            this.product_re.push(item)
          }
        });
        // 母婴专区
        this.product.forEach(item => {
          if(item.classify=="mu"){
            this.product_mu.push(item)
          }
        });
        // 食品保健
        this.product.forEach(item => {
          if(item.classify=="bao"){
            this.product_bao.push(item)
          }
        });
        // 美妆个护
        this.product.forEach(item => {
          if(item.classify=="mei"){
            this.product_mei.push(item)
          }
        });
      })
    },
    click_x(){
      this.dis_i1="display:block"
      this.dis_i2="display:none"
      this.dis_i3="display:none"
    },
    click_j(){
      this.dis_i1="display:none"
      this.dis_i2="display:block"
      this.dis_i3="display:none"
    },
    click_r(){
      this.dis_i1="display:none"
      this.dis_i2="display:none"
      this.dis_i3="display:block"
    }
  },

  mounted(){
    this.carousel_i();
    this.product_();
  }
}

</script>

<style scoped>

.index .f1{
  width: 1200px;
  height: 722px;
  margin: 30px auto 0 auto;
}
.f1_nav{display: flex; line-height: 38px;margin-bottom: 5px;}
.index .f1_nav_title{
  display: flex;
  margin-right: 836px;
  }
.index .f2_nav_title{
  margin-right: 750px !important;
}
.index .f1_nav_a a{
  color: #333;
  margin-left: 10px;
  font-size: 14px;
}
.index .f1_nav_title>div:first-child{
  font-size: 20px;
  padding: 0 5px;
  color: #fff;
  background-color: #e73736;
  margin-right: 10px;
}
.index .f1_nav_title>div:nth-child(2){
  font-size: 18px;
  font-weight: bold;
}
.index .f1_nav_a a:hover{color: #e73736;}
.index .f1 .f1_bottom{
  width: 1198px;
  height: 660px;
  display: flex;
  border: 1px solid #ddd;
  border-bottom: 0;
  border-right: 0;
}
.index .f1 .f1_bottom .f1_left_img{
  width: 240px;
  height: 661px;
}
.index .f1 .f1_bottom .f1_left_img img{
  width: 240px;
  height: 100%;
}
.index .f1 .f1_bottom .f1_content{
  width: 960px;
  height: 662px;
  display: flex;
  flex-wrap: wrap;
}
.index .f1 .f1_bottom .f1_content .p_1{
  width: 190px;
  height: 330px;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: left;
}
.index .f1 .f1_bottom .f1_content .p_1:hover .cart{
  display: block;
}
.index .f1 .f1_bottom .f1_content .p_1:hover {
  border-bottom: 1px solid #f00;
}
.index .f1 .f1_bottom .f1_content .p_1:hover .p1_img img{
  transform: scale(1.1);
}
.f1_content .p_1 .p1_img{
  width: 150px;
  height: 150px;
  padding: 55px 20px 0 20px;
}
.f1_content .p_1 .p1_img img{
  width: 100%;
  transition-duration: 0.5s;
}
.f1_content .p_1 .p1_title{
  padding-left: 15px;
  font-size: 14px;
  margin-top: 35px;
  color: #666;
  width: 158px;
  height: 29px;
  overflow: hidden;
  /* word-break: keep-all; */
  /* text-overflow: ellipsis; */

}
.f1_content .p_1 .p1_price{
  color: #CD0606;
  font-weight: bold;
  margin-top: 25px;
  padding: 0 10px;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
}
.f1_content .p_1 .p1_price .cart{
  width: 80px;
  height: 20px;
  color: #fff;
  background-color: #e73736;
  font-size: 12px;
  border-radius: 3px;
  text-align: center;
  display: none;
}


.notice{
  width: 1200px;
  height: 16px;
  font-size: 12px;
  margin: 14px auto 0 auto;
  text-align: left;
  color: #999;
}
.notice>span:first-child{
  color:#c3625d
}
.recommend{
  width: 1200px;
  height: 340px;
  margin: 20px auto 0 auto;
}
.recommend .title{
  display: flex;
  border-bottom: 2px solid #e73736;
}
.recommend .title div{
  width: 200px;
  height: 38px;
  background-color: #f5f5f5;
  margin-right: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  line-height: 38px;
  color: #666;
}
.recommend .title div:hover{
  color: #fff;
  background-color: #e73736;
}
.font_title{
  height: 15px;
  overflow: hidden;
}
.img_concent{
  height: 300px;
  background-color: #ededed;
  display: flex;
  justify-content: space-between;
}
.img_concent .i1, .img_concent .i2, .img_concent .i3{
  width: 230px;
  height: 220px;
  background-color: #fff;
}
.index .xin,.index .jing,.index .re{
  cursor: pointer;
}
.img_concent .i1_concent{
  width: 220px;
  text-align: center;
  margin-left: 18px;
}
.img_concent .i1 img,.img_concent .i2 img,.img_concent .i3 img{
  width: 100%;
}
.i1_font{
  width: 238px;
  height: 40px;
  background-color: #F1F7F4;
  padding: 20px 0;
}
.i1_font>div:nth-child(2){
  display: flex;
  justify-content: space-around;
  margin-top: 8px;
}
.img_concent .font_price{
  color: #e73736;
  font-size: 18px;
  line-height: 26px;
}
.img_concent .i1_font a{
  display: flex;
  line-height: 26px;
  background-color: #ff4200;
  color: #fff;
  padding: 0px 16px;
  border-radius: 5px;
}



















</style>